<template>
    <div class="GradeTable_Main_Box_css">
      <div class="GradeTable_Content_Box_css">
        <el-table :data="tableData" border style="width: 100%;height: 100%;">
          <el-table-column type="selection" width="60"/>
          <el-table-column label="id" width="110">
            <template #default="scope">
              <div>
                <span>{{ scope.row.id }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户名" width="110">
            <template #default="scope">
              <div>
                <span>{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户头像" width="220">
            <template #default="scope">
              <div>
                <!-- <span>{{ scope.row.sculpture }}</span> -->
                <img :src="scope.row.sculpture" style="width: 10vw;height: 15vh;"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="电话" width="180">
            <template #default="scope">
              <div>
                <span>{{ scope.row.phone}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" width="250">
            <template #default="scope">
              <div>
                <span>{{ scope.row.emailbox}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户密码" width="200">
            <template #default="scope">
              <div>
                <span>{{ scope.row.password}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="身份" width="100">
            <template #default="scope">
              <div>
                <span>{{ scope.row.member}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="账户余额" width="100">
            <template #default="scope">
              <div>
                <span>{{ scope.row.money}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="scope">
              <el-button size="small" @click="GreadehandleEdit(scope.row.id, scope.row)" type="warning" style="width: 4vw; height: 3vh;"
                >修改</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="GradehandleDelete(scope.row.id, scope.row)" style="width: 4vw; height: 3vh;"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="GradeTable_From_Box_css" v-show="GradeTable_Content_Show">
        <div class="DataTable_from_content_box_css">
          <el-form :label-position="labelPosition" label-width="80px" :model="GradeTableformLabelAlign" style="margin: 5vh auto;width: 75%;height: 90%;">
              <el-form-item label="用户名">
                <el-input v-model="GradeTableformLabelAlign.User_name"></el-input>
              </el-form-item>
              <el-form-item label="用户电话">
                <el-input v-model="GradeTableformLabelAlign.User_phone"></el-input>
              </el-form-item>
              <el-form-item label="用户邮箱">
                <el-input v-model="GradeTableformLabelAlign.User_email"></el-input>
              </el-form-item>
              <el-form-item label="用户密码">
                <el-input v-model="GradeTableformLabelAlign.User_password"></el-input>
              </el-form-item>
              <el-form-item label="用户头像">
                <el-input v-model="GradeTableformLabelAlign.User_image"></el-input>
              </el-form-item>
              <el-form-item label="用户权限">
                <el-input v-model="GradeTableformLabelAlign.User_member"></el-input>
              </el-form-item>
              <el-form-item label="用户余额">
                <el-input v-model="GradeTableformLabelAlign.User_money"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="updateGrade(GradeTableformLabelAlign)">确定修改</el-button>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="GradedeleteEdit">放弃修改</el-button>
              </el-form-item>
            </el-form>
        </div>
      </div>
    </div>
  </template>
    
    <script>
    import axios from 'axios'
    export default {
      name:'GradeTable',
      data(){
        return{
          GradeTable_Content_Show:false,
          GradeId:0,
          tableData:[
          ],
          GradeTableformLabelAlign: {
            User_Id: '',
            User_name: '',
            User_password: '',
            User_phone: '',
            User_email:'',
            User_member:'',
            User_money:'',
            User_image:''
        },
        }
      },
      methods:{
        GreadehandleEdit(index,row){
          console.log(index, row)
          this.GradeTable_Content_Show=true
          this.GradeId=index
          this.GradeTableformLabelAlign.User_name=row.username
          this.GradeTableformLabelAlign.User_password=row.password
          this.GradeTableformLabelAlign.User_phone=row.phone
          this.GradeTableformLabelAlign.User_email=row.emailbox
          this.GradeTableformLabelAlign.User_member=row.member
          this.GradeTableformLabelAlign.User_money=row.money
          this.GradeTableformLabelAlign.User_image=row.sculpture
          // console.log(row)
        },
        GradehandleDelete(index,row){
          console.log(index)
          var that=this
          axios.get('http://127.0.0.1/DeleteUserInfo',{params:{
            id:index
          }})
          .then(function(res){
            if(res.data==1){
              alert("删除成功")
              that.$router.go(0)
            }else{
              alert("删除失败")
            }
          })
          .catch(function(error){
            alert("系统出现错误")
          })
        },
        GradedeleteEdit(){
          this.GradeTable_Content_Show=false
        },
        updateGrade(GradeTableformLabelAlign){
          var that=this
          axios.get('http://127.0.0.1/UpdateUser',{params:{
            id:that.GradeId,
            username:GradeTableformLabelAlign.User_name,
            password:GradeTableformLabelAlign.User_password,
            sculpture:GradeTableformLabelAlign.User_image,
            eMailbox:GradeTableformLabelAlign.User_email,
            phone:GradeTableformLabelAlign.User_phone,
            member:GradeTableformLabelAlign.User_member,
            money:GradeTableformLabelAlign.User_money
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("修改成功")
              that.$router.go(0)
            }else{
              alert("修改失败")
            }
          }).catch(function(error){
            console.log(error)
            alert("系统出错")
          })
        }
    },
    mounted(){
      var that=this
      axios.get('http://127.0.0.1/UserInfo')
      .then(function(res){
        for(var i=0;i<res.data.length;i++){
          that.tableData.push(res.data[i])
        }
        console.log(res.data)
      })
      .catch(function(error){
        console.log(error)
      })
    }
  }
    </script>
<style>
  .GradeTable_Main_Box_css{
    position: relative;
    width: 83vw;
    height: 86vh;
  }
  .GradeTable_Content_Box_css{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .GradeTable_From_Box_css{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .GradeTable_from_content_box_css{
    position: absolute;
    top:7vh;
    left: 24vw;
    width: 40%;
    height: 85%;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
  }
</style>